---
name: 图标 icon
route: /icon
---

import { Playground, PropsTable } from 'docz'
import Icon from './index.js'

import './index.scss'

# 图标

## 代码演示

### 基本用法

<Playground>
  <Icon type='music'/>
</Playground>

### 颜色修改

<Playground>
  <div className="zhuiicon-row">
    <Icon type='download' color='#1770a8' />
    <Icon type='message' color='#41395b' />
    <Icon type='bell' color='#6f8657' />
    <Icon type='email' color='#94232d' />
  </div>
</Playground>

### 所有

<Playground>
  <div className="zhuiicon-wrapper">
    <Icon type='music' /> music  
  </div>
  <div className="zhuiicon-wrapper">
    <Icon type='email' /> email  
  </div>
  <div className="zhuiicon-wrapper">
    <Icon type='search' /> search  
  </div>
  <div className="zhuiicon-wrapper">
    <Icon type='message' /> message  
  </div>
  <div className="zhuiicon-wrapper">
    <Icon type='camera' /> camera  
  </div>
  <div className="zhuiicon-wrapper">
    <Icon type='picture' /> picture  
  </div>
  <div className="zhuiicon-wrapper">
    <Icon type='download' /> download  
  </div>
  <div className="zhuiicon-wrapper">
    <Icon type='refresh' /> refresh  
  </div>
  <div className="zhuiicon-wrapper">
    <Icon type='store' /> store  
  </div>
  <div className="zhuiicon-wrapper">
    <Icon type='delete' /> delete  
  </div>
  <div className="zhuiicon-wrapper">
    <Icon type='social' /> social  
  </div>
  <div className="zhuiicon-wrapper">
    <Icon type='index' /> index  
  </div>
  <div className="zhuiicon-wrapper">
    <Icon type='setting' /> setting  
  </div>
  <div className="zhuiicon-wrapper">
    <Icon type='time' /> time  
  </div>
  <div className="zhuiicon-wrapper">
    <Icon type='menu' /> menu  
  </div>
  <div className="zhuiicon-wrapper">
    <Icon type='calculator' /> calculator  
  </div>
  <div className="zhuiicon-wrapper">
    <Icon type='edit' /> edit  
  </div>
  <div className="zhuiicon-wrapper">
    <Icon type='person' /> person  
  </div>
  <div className="zhuiicon-wrapper">
    <Icon type='achievement' /> achievement  
  </div>
  <div className="zhuiicon-wrapper">
    <Icon type='bell' /> bell  
  </div>
</Playground>

### 补充

图标来源为[Iconfont](https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=8227)，侵删。

## 属性

<PropsTable of={Icon} />
